<template>
  <div class="unit-exbit-null-remarks-info" @mouseup="endDrag()">
    <div
      class="solid-box"
      ref="track"
      @mousedown="startDrag($event)"
      @mousemove="draggings($event)"
      @mouseup="endDrag()"
    >
      <div class="solid-border" :class="'solid-border' + store.styleInfo.colorType"></div>
      <div
        draggable="true"
        :style="{ left: knobPosition + 'px' }"
        ref="knob"
        class="templatestyle1-scroll-box-tumb"
        :class="'templatestyle1-scroll-box' + store.styleInfo.colorType"
      >
        <div style="margin-top: 10px">
          <i
            draggable="true"
            v-if="store.styleInfo.styleType == 1"
            class="iconfonts"
            :style="{
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe602;
          </i>
          <i
            draggable="true"
            v-if="store.styleInfo.styleType == 2"
            class="iconfonts"
            :style="{
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe60d;
          </i>
          <i
            draggable="true"
            v-if="store.styleInfo.styleType == 3"
            class="iconfonts"
            :style="{
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe613;
          </i>
          <i
            draggable="true"
            v-if="store.styleInfo.styleType == 4"
            class="iconfonts"
            :style="{
              fontSize: '20px',
              color: store.styleInfo.themeColor,
            }"
          >
            &#xe603;
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { useProjectStore } from '@/store';
import dotIcon from '@/pages/templatePage/components/publicComponents/components/dotIcon.vue';
const store = useProjectStore();
const isScrollType = ref(false);
const track = ref(null); // 拖动轨道
const knob = ref(null); // 拖动手柄
const knobPosition = ref(0); // 手柄位置
const dragging = ref(false); // 是否拖动中
const per = ref(0);
const props = defineProps({
  remarks: {
    type: String,
  },
  dom: {
    type: String,
  },
  flag: {
    type: Boolean,
  },
});
const startDrag = (event: any) => {
  // if (!isScrollType.value) {
  //   return;
  // }
  dragging.value = true;
  let arrs = event.clientX - track.value.getBoundingClientRect().left;
  //console.log('arrs', arrs);

  // if (arrs >= 1180) {
  //   knobPosition.value = 1180;
  // } else {
  //   knobPosition.value = arrs;
  // }
  knobPosition.value = arrs;
  var container = document.getElementById(`boxs-content-scroll${props.dom}`); // 滚动容器
  var scrollPercent = knobPosition.value / (1180 - 20); // 需要滚动到的百分比
  var scrollWidth = container.scrollWidth; //总滚动高度
  var clientWidth = container.clientWidth; //滚动容器高度
  container.scrollLeft = (scrollWidth - clientWidth) * scrollPercent; //设置滚动位置
};

// 拖动时更新手柄位置
const draggings = (event: any) => {
  if (!isScrollType.value) {
    return;
  }
  //console.log(props.flag);

  if (!dragging.value) return;
  if (props.flag) return;
  const trackTop = track.value.getBoundingClientRect().left;

  const trackHeight = 1160;
  //console.log(trackHeight);
  const x = event.clientX - trackTop;
  console.log(x);
  let arrs = Math.min(trackHeight, Math.max(0, x));
  //console.log('arrs', arrs);

  // if (arrs >= 1180) {
  //   knobPosition.value = 1180;
  // } else {
  //   knobPosition.value = arrs;
  // }

  knobPosition.value = arrs;
  if (knobPosition.value <= 10) {
    knobPosition.value = 0;
  }
  //   let scrollB=knobPosition.value/200
  var container = document.getElementById(`boxs-content-scroll${props.dom}`); // 滚动容器
  var scrollPercent = knobPosition.value / (1180 - 20); // 需要滚动到的百分比
  var scrollWidth = container.scrollWidth; //总滚动高度
  var clientWidth = container.clientWidth; //滚动容器高度
  container.scrollLeft = (scrollWidth - clientWidth) * scrollPercent; //设置滚动位置
};

// 结束拖动时更新状态
const endDrag = () => {
  dragging.value = false;
};
const isScrollBox = (element: any) => {
  return element.scrollWidth > element.clientWidth;
};
const initScroll = () => {
  var container = document.getElementById(`boxs-content-scroll${props.dom}`); // 滚动容器
  //console.log(`boxs-content-scroll${props.dom}`);

  if (isScrollBox(container)) {
    isScrollType.value = true;
    //console.log('滚动盒子开启滚动');
  } else {
    isScrollType.value = false;
    //console.log('滚动盒子开启禁止滚动');
  }
};
const initScrollBox = () => {
  if (!isScrollType.value) {
    return;
  }
  var container = document.getElementById(`boxs-content-scroll${props.dom}`); // 滚动容器

  container.addEventListener('scroll', function () {
    var scrollLeft = container.scrollLeft;
    var scrollWidth = container.scrollWidth;
    var width = container.clientWidth;
    var scrolled = (scrollLeft / (scrollWidth - width)) * 100;
    knobPosition.value = (1160 * scrolled) / 100;
    // if (knobPosition.value > 1179) {
    //   knobPosition.value = knobPosition.value;
    // } else {
    //   knobPosition.value = knobPosition.value;
    // }
    knobPosition.value = knobPosition.value;
    //console.log('knobPosition', knobPosition.value);
  });
};
onMounted(() => {
  initScroll();
  initScrollBox();
});
watch(
  () => props.remarks,
  () => {
    nextTick(() => {
      initScroll();
      initScrollBox();
    });
  },
  { deep: true },
);
</script>

<style scoped lang="less">
.unit-exbit-null-remarks-info {
  display: flex;
  height: 20px;
  position: relative;
  .unit-exbit-null-remarks-info-remarks {
    flex: 1;

    overflow-y: auto;
    span {
      text-indent: 2em;
      font-size: 17px;
      // font-weight: 500;
      color: #333333;
      line-height: 30px;
      margin-bottom: 24px;
      text-align: justify;
    }
  }
}
.solid-box {
  position: relative;
  height: 20px;
  width: 100%;
}
.unit-exbit-null-remarks-info-remarks::-webkit-scrollbar {
  display: none;
}
.templatestyle1-scroll-box-tumb {
  position: absolute;
  position: relative;
  z-index: 60;
  cursor: pointer;
}

.solid-border {
  position: absolute;
  top: 20px;
  left: 8px;
  width: 100%;
  height: 4px;
  border-radius: 5px;
  opacity: 0.3;
}
.solid-border1 {
  background: #cfbda8;
}
.solid-border2 {
  background: #8f9ebf;
}
.solid-border3 {
  background: #b9463f;
}
.solid-border4 {
  background: #343029;
}
.solid-border5 {
  background: #171719;
}
i {
  -webkit-user-drag: auto;
  -khtml-user-drag: auto;
  -moz-user-drag: auto;
  -o-user-drag: auto;
  user-drag: auto;
  user-select: auto;
}
</style>
